<template>
  <el-container>
    <el-header>
      <h2>影像设置</h2>
    </el-header>
    <el-main>
      <el-form :model="form" label-width="150px">
        <el-form-item label="黑边透明度">
          <el-input
            v-model="form.blackEdgeOpacity"
            type="number"
            placeholder="请输入透明度"
          />
        </el-form-item>

        <el-form-item label="影像分辨率">
          <el-select v-model="form.resolution" placeholder="请选择分辨率">
            <el-option label="1280*720" value="1280*720" />
            <el-option label="1920*1080" value="1920*1080" />
            <el-option label="2560*1440" value="2560*1440" />
            <el-option label="3960*2180" value="3960*2180" />
          </el-select>
        </el-form-item>

        <el-form-item label="影像压缩比">
          <el-input
            v-model="form.compressionRatio"
            type="number"
            placeholder="输入0.1-1数字"
          />
        </el-form-item>

        <el-form-item label="加载模式">
          <el-select v-model="form.loadingMode" placeholder="请选择加载模式">
            <el-option label="延迟加载" value="延迟加载" />
            <el-option label="按需加载" value="按需加载" />
          </el-select>
        </el-form-item>

        <el-form-item label="白平衡">
          <el-select v-model="form.whiteBalance" placeholder="请选择白平衡">
            <el-option label="正常" value="正常" />
            <el-option label="日光" value="日光" />
            <el-option label="白炽灯" value="白炽灯" />
            <el-option label="荧光" value="荧光" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { ref } from "vue";
import { ElMessage } from "element-plus";

export default {
  setup() {
    const form = ref({
      blackEdgeOpacity: 100,
      resolution: "1920*1080", // 默认分辨率
      compressionRatio: 0.5, // 默认压缩比
      loadingMode: "延迟加载", // 默认加载模式
      whiteBalance: "正常" // 默认白平衡
    });

    const save = () => {
      if (
        form.value.compressionRatio < 0.1 ||
        form.value.compressionRatio > 1
      ) {
        ElMessage.error("影像压缩比必须在0.1到1之间");
        return;
      }
      ElMessage.success("保存成功！");
      console.log("保存的设置:", form.value);
      // 可在此添加保存逻辑，例如 API 请求
    };

    const cancel = () => {
      ElMessage.info("取消操作");
      // 可在此添加取消逻辑，例如重置表单
    };

    return { form, save, cancel };
  }
};
</script>

<style scoped>
.el-header {
  padding: 20px;
  text-align: center;
  background-color: #f5f7fa;
}
</style>
